<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Configure</title>
        <link href="../resources/css/bootstrap.css" rel="stylesheet">
        <link href="../resources/css/style.css" rel="stylesheet">
    </head>
    <body>
        <nav class="navbar navbar-default bg-primary navbar-fixed-top ">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <a class="navbar-brand navbar-logo" width="120" href="#"><img src="../resources/images/introlab_icon.png"></a>
                        <a class="navbar-brand" width="120" href="#"><span>ODAS Studio</span></a>
                    </div>
                </div>
            </nav>

        <div class="container-fluid" style="padding-top: 70px">
            <form class="form-horizontal" onsubmit="return false" id="configure-form">
                <div class="form-group">
                    <div class="col-xs-9 col-xs-offset-3">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" v-model="useSpeech"/>Use Google Speech Voice Recognition
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-group" v-bind:class="{ 'has-error' : apiKeyfileError}" v-if="useSpeech">
                    <label for="api-keyfile-input" class="col-xs-3 control-label">Google API Keyfile</label>
                    <div class="col-xs-9">
                        <input type="url" class="form-control" id="api-keyfile-input" v-model="apiKeyfile" onclick="browseKey()"/>
                    </div>
                </div>
                <div class="form-group" v-bind:class="{ 'has-error' : languageStringError}" v-if="useSpeech">
                    <label for="language-select" class="col-xs-3 control-label">Transcription Language</label>
                    <div class="col-xs-6">
                        <select class="form-control" id="language-select" v-model="languageCode">
                            <option value="en-US">English (United States)</option>
                            <option value="en-CA">English (Canada)</option>
                            <option value="fr-CA">Français (Canada)</option>
                            <option value="fr-FR">Français (France)</option>
                            <option value="other">Other</option>
                        </select>
                    </div>
                    <div class="col-xs-3" v-if="customLanguage">
                        <input type="text" placeholder="ll-CC" class="form-control" id="language-input" v-model="languageString"/>
                    </div>
                </div>
                <div class="form-group"  v-bind:class="{ 'has-error' : sampleRateError}">
                    <label for="samplerate-input" class="col-xs-3 control-label">Sample Rate</label>
                    <div class="col-xs-6">
                        <input type="number" class="form-control" id="samplerate-textfield" v-model.number="sampleRate"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-xs-6">
                        <p>{{userMessage}}</p>
                    </div>
                    <div class="col-xs-3">
                        <button type="submit" class="btn btn-danger" style="width: 100%" id="cancel-button">Cancel</button>
                    </div>
                    <div class="col-xs-3">
                        <button type="submit" class="btn btn-primary" style="width: 100%" id="save-button" v-bind:class="{disabled: hasError}">Save</button>
                    </div>
                </div>
            </form>
        </div>

        <footer class="footer">
            <div class="container-fluid">
                <div class="row">
                    <p class="col-xs-10 text-muted">Graphic interface for ODAS library</p>
                    <a id="close-button" class="col-xs-2 text-right">Close</a>
                </div>
            </div>
        </footer>

        <script>window.$ = window.jQuery = require('./../resources/js/jquery.min.js');</script>
        <script src="./../resources/js/bootstrap.min.js"></script>
        <script src="./../resources/js/vue.js"></script>
        <script src="./../resources/js/configure-model.js"></script>
    </body>
</html>
